<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="/favicon.ico">
    <link rel="Shortcut Icon" href="/favicon.ico"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="__STATIC__/admin/lib/html5shiv.js"></script>
    <script type="text/javascript" src="__STATIC__/admin/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/static/h-ui.admin/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="__STATIC__/admin/lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title></title>
</head>
<body onload="prettyPrint()">
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i>
    首页 <span class="c-gray en">&gt;</span>
    页面模板 <span class="c-gray en">&gt;</span>
    按钮样式 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i
        class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="Hui-article">
    <article class="cl pd-20">
        <h1 class="page_title">按钮组</h1>
        <div class="codeView docs-example">
            <div class="btn-group">
                <span class="btn btn-primary radius">左边按钮</span>
                <span class="btn btn-default radius">中间按钮</span>
                <span class="btn btn-default radius">中间按钮</span>
                <span class="btn btn-default radius">右边按钮</span>
            </div>
            <div class="cl mt-20">
                <div class="btn-group l">
                    <span class="btn btn-primary" title="源代码"><i class="Hui-iconfont"></i></span>
                </div>
                <div class="btn-group l ml-5">
                    <span class="btn btn-primary" title="左对齐"><i class="Hui-iconfont"></i></span>
                    <span class="btn btn-primary" title="居中对齐"><i class="Hui-iconfont"></i></span>
                    <span class="btn btn-primary" title="右对齐"><i class="Hui-iconfont"></i></span>
                    <span class="btn btn-primary" title="两头对齐"><i class="Hui-iconfont"></i></span>
                </div>
                <div class="btn-group l ml-5">
                    <span class="btn btn-primary" title="字体"><i class="Hui-iconfont"></i></span>
                    <span class="btn btn-primary" title="加粗"><i class="Hui-iconfont"></i></span>
                    <span class="btn btn-primary" title="倾斜"><i class="Hui-iconfont"></i></span>
                    <span class="btn btn-primary" title="下划线"><i class="Hui-iconfont"></i></span>
                    <span class="btn btn-primary" title="行高"><i class="Hui-iconfont"></i></span>
                    <span class="btn btn-primary" title="行宽"><i class="Hui-iconfont"></i></span>
                </div>
                <div class="btn-group l ml-5">
                    <span class="btn btn-primary" title="链接"><i class="Hui-iconfont"></i></span>
                    <span class="btn btn-primary" title="有序列表"><i class="Hui-iconfont"></i></span>
                    <span class="btn btn-primary" title="无序列表"><i class="Hui-iconfont"></i></span>
                </div>
                <div class="btn-group l ml-5">
                    <span class="btn btn-primary" title="剪切"><i class="Hui-iconfont"></i></span>
                    <span class="btn btn-primary" title="复制"><i class="Hui-iconfont"></i></span>
                    <span class="btn btn-primary" title="粘贴"><i class="Hui-iconfont"></i></span>
                </div>
            </div>
        </div>
        <h3>HTML代码</h3><pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn-group"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">  </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary radius"</span><span class="tag">&gt;</span><span class="pln">左边按钮</span><span class="tag">&lt;/span&gt;</span></li><li class="L2"><span class="pln">  </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default radius"</span><span class="tag">&gt;</span><span class="pln">中间按钮</span><span class="tag">&lt;/span&gt;</span></li><li class="L3"><span class="pln">  </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default radius"</span><span class="tag">&gt;</span><span class="pln">中间按钮</span><span class="tag">&lt;/span&gt;</span></li><li class="L4"><span class="pln">  </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default radius"</span><span class="tag">&gt;</span><span class="pln">右边按钮</span><span class="tag">&lt;/span&gt;</span></li><li class="L5"><span class="tag">&lt;/div&gt;</span></li></ol></pre>
        <h3>CSS代码</h3><pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="kwd">group</span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">0</span><span class="pun">}</span></li><li class="L1"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="kwd">group</span><span class="pln"> </span><span class="pun">.</span><span class="pln">btn</span><span class="pun">{</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:-</span><span class="lit">1px</span><span class="pun">}</span></li><li class="L2"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="kwd">group</span><span class="pln"> </span><span class="pun">.</span><span class="pln">btn</span><span class="pun">:</span><span class="kwd">not</span><span class="pun">(:</span><span class="pln">first</span><span class="pun">-</span><span class="pln">child</span><span class="pun">):</span><span class="kwd">not</span><span class="pun">(:</span><span class="kwd">last</span><span class="pun">-</span><span class="pln">child</span><span class="pun">):</span><span class="kwd">not</span><span class="pun">(.</span><span class="pln">dropdown</span><span class="pun">-</span><span class="pln">toggle</span><span class="pun">){</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="lit">0</span><span class="pun">}</span></li><li class="L3"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="kwd">group</span><span class="pln"> </span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">.</span><span class="pln">btn</span><span class="pun">:</span><span class="pln">first</span><span class="pun">-</span><span class="pln">child</span><span class="pun">:</span><span class="kwd">not</span><span class="pun">(:</span><span class="kwd">last</span><span class="pun">-</span><span class="pln">child</span><span class="pun">):</span><span class="kwd">not</span><span class="pun">(.</span><span class="pln">dropdown</span><span class="pun">-</span><span class="pln">toggle</span><span class="pun">){</span><span class="pln">border</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">-</span><span class="pln">right</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">border</span><span class="pun">-</span><span class="pln">top</span><span class="pun">-</span><span class="pln">right</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">}</span></li><li class="L4"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="kwd">group</span><span class="pln"> </span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">.</span><span class="pln">btn</span><span class="pun">:</span><span class="kwd">last</span><span class="pun">-</span><span class="pln">child</span><span class="pun">:</span><span class="kwd">not</span><span class="pun">(:</span><span class="pln">first</span><span class="pun">-</span><span class="pln">child</span><span class="pun">),.</span><span class="pln">btn</span><span class="pun">-</span><span class="kwd">group</span><span class="pln"> </span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">.</span><span class="pln">dropdown</span><span class="pun">-</span><span class="pln">toggle</span><span class="pun">:</span><span class="kwd">not</span><span class="pun">(:</span><span class="pln">first</span><span class="pun">-</span><span class="pln">child</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">border</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">-</span><span class="pln">left</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">border</span><span class="pun">-</span><span class="pln">top</span><span class="pun">-</span><span class="pln">left</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">}</span></li></ol></pre>
        <!--高速版-->
        <div id="SOHUCS" sid=""></div>
    </article>
    <article class="cl pd-20">
        <h1 class="page_title">按钮</h1>
        <p>我是一个按钮</p>
        <p>我诞生到世界上是这样的 <input type="button" value="按钮"></p>
        <p>每个人都在使用他</p>
        <p>但每个人都不喜欢他默认的样子</p>
        <p>很多人都在赋予他新的外观和意义</p>
        <p>直到今天，从没停止……</p>
        <p>&nbsp;</p>
        <p>任何赋予<code>.btn</code>类的页面元素都会显示方角按钮样式。通常用在<code>&lt;a&gt;</code> 和 <code>&lt;button&gt;</code> 页面元素上。追加.radius就会显示css3圆角效果。</p>
        <div class="codeView docs-example">
            <table class="table table-border table-bordered table-bg">
                <thead>
                <tr>
                    <th>按钮</th>
                    <th>class=""</th>
                    <th>描述</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><input class="btn btn-default" type="button" value="默认"></td>
                    <td><code>btn btn-default</code></td>
                    <td>默认按钮</td>
                </tr>
                <tr>
                    <td><input class="btn btn-default radius" type="button" value="圆角效果"></td>
                    <td><code>btn btn-default radius</code></td>
                    <td>圆角默认按钮</td>
                </tr>
                <tr>
                    <td><input class="btn btn-default round" type="button" value="椭圆效果"></td>
                    <td><code>btn btn-default round</code></td>
                    <td>椭圆默认按钮</td>
                </tr>
                <tr>
                    <td><input class="btn btn-primary radius" type="button" value="主要"></td>
                    <td><code>btn btn-primary radius</code></td>
                    <td>提供额外的视觉感, 可在一系列的按钮中指出主要操作</td>
                </tr>
                <tr>
                    <td><input class="btn radius btn-secondary" type="button" value="次要"></td>
                    <td><code>btn btn-secondary radius</code></td>
                    <td>默认样式的替代样式</td>
                </tr>
                <tr>
                    <td><input class="btn btn-success radius" type="button" value="成功"></td>
                    <td><code>btn btn-success radius</code></td>
                    <td>表示成功或积极的动作</td>
                </tr>
                <tr>
                    <td><input class="btn radius btn-warning" type="button" value="警告"></td>
                    <td><code>btn btn-warning radius</code></td>
                    <td>提醒应该谨慎采取这个动作</td>
                </tr>
                <tr>
                    <td><input class="btn btn-danger radius" type="button" value="危险"></td>
                    <td><code>btn btn-danger radius</code></td>
                    <td>表示这个动作危险或存在危险</td>
                </tr>
                <tr>
                    <td><input class="btn btn-link radius" type="button" value="链接"></td>
                    <td><code>btn btn-link</code></td>
                    <td>简化一个按钮, 使它看起来像一个链接，同时保持按钮的行为</td>
                </tr>
                <tr>
                    <td><input class="btn disabled radius" type="button" value="禁用"></td>
                    <td><code>btn disabled radius</code></td>
                    <td>disabled只是让状态看上去像禁用，但实际并没有真正禁用，需要js代码来禁止链接的行为</td>
                </tr>
                </tbody>
            </table>
            <p class="mt-10"><input class="btn btn-block btn-primary radius" type="button" value="btn-block块级按钮，通栏显示"></p>
        </div>
        <p>不支持圆角和背景渐变浏览器，如IE系列，会显示扁平纯色直角效果。</p>
        <h3>HTML代码</h3><pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"默认"</span><span class="tag">&gt;</span></li><li class="L1"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default radius"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"圆角效果"</span><span class="tag">&gt;</span></li><li class="L2"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-default round"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"椭圆效果"</span><span class="tag">&gt;</span></li><li class="L3"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary radius"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"主要"</span><span class="tag">&gt;</span></li><li class="L4"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn radius btn-secondary"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"次要"</span><span class="tag">&gt;</span></li><li class="L5"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-success radius"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"成功"</span><span class="tag">&gt;</span></li><li class="L6"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn radius btn-warning"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"警告"</span><span class="tag">&gt;</span></li><li class="L7"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-danger radius"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"危险"</span><span class="tag">&gt;</span></li><li class="L8"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-link radius"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"链接"</span><span class="tag">&gt;</span></li><li class="L9"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn disabled radius"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"禁用"</span><span class="tag">&gt;</span></li></ol></pre>
        <h2>空心效果</h2>
        <div class="codeView docs-example">
            <table class="table table-border table-bordered table-bg">
                <thead>
                <tr>
                    <th>按钮</th>
                    <th>class=""</th>
                    <th>描述</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><input class="btn btn-primary-outline radius" type="button" value="主要"></td>
                    <td><code>btn btn-primary-outline radius</code></td>
                    <td>提供额外的视觉感, 可在一系列的按钮中指出主要操作</td>
                </tr>
                <tr>
                    <td><input class="btn radius btn-secondary-outline radius" type="button" value="次要"></td>
                    <td><code>btn btn-secondary-outline radius</code></td>
                    <td>默认样式的替代样式</td>
                </tr>
                <tr>
                    <td><input class="btn btn-success-outline radius" type="button" value="成功"></td>
                    <td><code>btn btn-success-outline radius</code></td>
                    <td>表示成功或积极的动作</td>
                </tr>
                <tr>
                    <td><input class="btn btn-warning-outline radius" type="button" value="警告"></td>
                    <td><code>btn btn-warning-outline radius</code></td>
                    <td>提醒应该谨慎采取这个动作</td>
                </tr>
                <tr>
                    <td><input class="btn btn-danger-outline radius" type="button" value="危险"></td>
                    <td><code>btn btn-danger-outline radius</code></td>
                    <td>表示这个动作危险或存在危险</td>
                </tr>
                <tr>
                    <td><input class="btn btn-primary-outline radius disabled" type="button" value="禁用"></td>
                    <td><code>btn btn-primary-outline radius disabled</code></td>
                    <td>disabled只是让状态看上去像禁用，但实际并没有真正禁用，需要js代码来禁止链接的行为</td>
                </tr>
                </tbody>
            </table>
            <p class="mt-10"><input class="btn btn-primary-outline radius btn-block" type="button" value="btn-block块级按钮，通栏显示"></p>
        </div>

        <h2>按钮大小</h2>
        <p>2.0 重新定义尺寸的命名，采用size-开头，尺寸是个全局类名。</p>
        <table class="table table-border table-bordered table-striped">
            <thead>
            <tr>
                <th width="30%">按钮</th>
                <th>class=""</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><input type="button" class="btn btn-primary size-XL radius" value="特大按钮"></td>
                <td><code>size-XL</code></td>
            </tr>
            <tr>
                <td><input type="button" class="btn btn-primary size-L radius" value="大按钮"></td>
                <td><code>size-L</code></td>
            </tr>
            <tr>
                <td><input type="button" class="btn btn-primary radius" value="默认尺寸"></td>
                <td><code>size-M</code> 缺省值</td>
            </tr>
            <tr>
                <td><input type="button" class="btn btn-primary size-S radius" value="小按钮"></td>
                <td><code>size-S</code></td>
            </tr>
            <tr>
                <td><input type="button" class="btn btn-primary size-MINI radius" value="迷你按钮"></td>
                <td><code>size-MINI</code></td>
            </tr>
            </tbody>
        </table>
        <h3>HTML代码</h3><pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary size-XL radius"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"特大按钮"</span><span class="tag">&gt;</span></li><li class="L1"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary size-L radius"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"大按钮"</span><span class="tag">&gt;</span></li><li class="L2"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary size-M radius"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"默认尺寸"</span><span class="tag">&gt;</span></li><li class="L3"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary size-S radius"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"小按钮"</span><span class="tag">&gt;</span></li><li class="L4"><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary size-MINI radius"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"迷你按钮"</span><span class="tag">&gt;</span></li></ol></pre>
        <h3>CSS代码</h3><pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="com">/*按钮*/</span></li><li class="L1"><span class="pun">.</span><span class="pln">btn</span><span class="pun">{</span><span class="pln">display</span><span class="pun">:</span><span class="kwd">inline</span><span class="pun">-</span><span class="pln">block</span><span class="pun">;</span><span class="pln">cursor</span><span class="pun">:</span><span class="pln">pointer</span><span class="pun">;</span><span class="pln">text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln">center</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="lit">400</span><span class="pun">;</span><span class="pln">white</span><span class="pun">-</span><span class="pln">space</span><span class="pun">:</span><span class="pln">nowrap</span><span class="pun">;</span><span class="pln">vertical</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> middle</span><span class="pun">;*</span><span class="pln">zoom</span><span class="pun">:</span><span class="lit">1</span><span class="pun">;-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color </span><span class="pun">.</span><span class="lit">1s</span><span class="pln"> linear</span><span class="pun">;-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color </span><span class="pun">.</span><span class="lit">1s</span><span class="pln"> linear</span><span class="pun">;-</span><span class="pln">o</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color </span><span class="pun">.</span><span class="lit">1s</span><span class="pln"> linear</span><span class="pun">;</span><span class="pln">transition</span><span class="pun">:</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color </span><span class="pun">.</span><span class="lit">1s</span><span class="pln"> linear</span><span class="pun">}</span></li><li class="L2"><span class="pln">a</span><span class="pun">.</span><span class="pln">btn</span><span class="pun">:</span><span class="pln">hover</span><span class="pun">,</span><span class="pln">a</span><span class="pun">.</span><span class="pln">btn</span><span class="pun">:</span><span class="pln">focus</span><span class="pun">,</span><span class="pln">a</span><span class="pun">.</span><span class="pln">btn</span><span class="pun">:</span><span class="pln">active</span><span class="pun">,</span><span class="pln">a</span><span class="pun">.</span><span class="pln">btn</span><span class="pun">.</span><span class="pln">active</span><span class="pun">,</span><span class="pln">a</span><span class="pun">.</span><span class="pln">btn</span><span class="pun">.</span><span class="pln">disabled</span><span class="pun">,</span><span class="pln">a</span><span class="pun">.</span><span class="pln">btn</span><span class="pun">[</span><span class="pln">disabled</span><span class="pun">]{</span><span class="pln">text</span><span class="pun">-</span><span class="pln">decoration</span><span class="pun">:</span><span class="pln">none</span><span class="pun">}</span></li><li class="L3"><span class="pun">.</span><span class="pln">btn</span><span class="pun">:</span><span class="pln">active</span><span class="pun">,.</span><span class="pln">btn</span><span class="pun">.</span><span class="pln">active</span><span class="pun">{</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#ccc}</span></li><li class="L4"><span class="pun">.</span><span class="pln">btn</span><span class="pun">:</span><span class="pln">first</span><span class="pun">-</span><span class="pln">child</span><span class="pun">{*</span><span class="pln">margin</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="lit">0</span><span class="pun">}</span></li><li class="L5"><span class="pun">.</span><span class="pln">btn</span><span class="pun">.</span><span class="pln">active</span><span class="pun">,.</span><span class="pln">btn</span><span class="pun">:</span><span class="pln">active</span><span class="pun">{-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="lit">0</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> </span><span class="lit">8px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.125</span><span class="pun">)</span><span class="pln"> inset</span><span class="pun">;-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="lit">0</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> </span><span class="lit">8px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.125</span><span class="pun">)</span><span class="pln"> inset</span><span class="pun">;</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="lit">0</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> </span><span class="lit">8px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.125</span><span class="pun">)</span><span class="pln"> inset</span><span class="pun">}</span></li><li class="L6"><span class="pln">&nbsp;</span></li><li class="L7"><span class="com">/*默认——灰色 通常用于取消*/</span></li><li class="L8"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="kwd">default</span><span class="pun">{</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#e6e6e6}</span></li><li class="L9"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="kwd">default</span><span class="pun">:</span><span class="pln">hover</span><span class="pun">,</span></li><li class="L0"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="kwd">default</span><span class="pun">:</span><span class="pln">focus</span><span class="pun">,</span></li><li class="L1"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="kwd">default</span><span class="pun">:</span><span class="pln">active</span><span class="pun">,</span></li><li class="L2"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="kwd">default</span><span class="pun">.</span><span class="pln">active</span><span class="pun">{</span><span class="pln">color</span><span class="pun">:</span><span class="com">#333;background-color:#c7c7c7;border-color:#c7c7c7}</span></li><li class="L3"><span class="pln">&nbsp;</span></li><li class="L4"><span class="com">/*主要——主色 通常用于确定、提交、购买、支付等*/</span></li><li class="L5"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">primary</span><span class="pun">{</span><span class="pln">color</span><span class="pun">:</span><span class="com">#fff;background-color:#5a98de; border-color:#5a98de}</span></li><li class="L6"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">primary</span><span class="pun">:</span><span class="pln">hover</span><span class="pun">,</span></li><li class="L7"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">primary</span><span class="pun">:</span><span class="pln">focus</span><span class="pun">,</span></li><li class="L8"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">primary</span><span class="pun">:</span><span class="pln">active</span><span class="pun">,</span></li><li class="L9"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">primary</span><span class="pun">.</span><span class="pln">active</span><span class="pun">{</span><span class="pln">color</span><span class="pun">:</span><span class="com">#fff;background-color:#6aa2e0;border-color:#6aa2e0}</span></li><li class="L0"><span class="pln">&nbsp;</span></li><li class="L1"><span class="com">/*次要按钮*/</span></li><li class="L2"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">secondary</span><span class="pun">{</span><span class="pln">color</span><span class="pun">:</span><span class="com">#fff;background-color:#3bb4f2; border-color:#3bb4f2}</span></li><li class="L3"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">secondary</span><span class="pun">:</span><span class="pln">hover</span><span class="pun">,</span></li><li class="L4"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">secondary</span><span class="pun">:</span><span class="pln">focus</span><span class="pun">,</span></li><li class="L5"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">secondary</span><span class="pun">:</span><span class="pln">active</span><span class="pun">,</span></li><li class="L6"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">secondary</span><span class="pun">.</span><span class="pln">active</span><span class="pun">{</span><span class="pln">color</span><span class="pun">:</span><span class="com">#fff;background-color:#0f9ae0;border-color:#0f9ae0}</span></li><li class="L7"><span class="pln">&nbsp;</span></li><li class="L8"><span class="com">/*成功*/</span></li><li class="L9"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">success</span><span class="pun">{</span><span class="pln">color</span><span class="pun">:</span><span class="com">#fff;background-color:#5eb95e; border-color:#5eb95e}</span></li><li class="L0"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">success</span><span class="pun">:</span><span class="pln">hover</span><span class="pun">,</span></li><li class="L1"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">success</span><span class="pun">:</span><span class="pln">focus</span><span class="pun">,</span></li><li class="L2"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">success</span><span class="pun">:</span><span class="pln">active</span><span class="pun">,</span></li><li class="L3"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">success</span><span class="pun">.</span><span class="pln">active</span><span class="pun">{</span><span class="pln">color</span><span class="pun">:</span><span class="com">#fff;background-color:#429842;border-color:#429842}</span></li><li class="L4"><span class="pln">&nbsp;</span></li><li class="L5"><span class="com">/*警告*/</span></li><li class="L6"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">warning</span><span class="pun">{</span><span class="pln">color</span><span class="pun">:</span><span class="com">#fff;background-color:#f37b1d; border-color:#f37b1d}</span></li><li class="L7"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">warning</span><span class="pun">:</span><span class="pln">hover</span><span class="pun">,</span></li><li class="L8"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">warning</span><span class="pun">:</span><span class="pln">focus</span><span class="pun">,</span></li><li class="L9"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">warning</span><span class="pun">:</span><span class="pln">active</span><span class="pun">,</span></li><li class="L0"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">warning</span><span class="pun">.</span><span class="pln">active</span><span class="pun">{</span><span class="pln">color</span><span class="pun">:</span><span class="com">#fff;background-color:#c85e0b;border-color:#c85e0b}</span></li><li class="L1"><span class="pln">&nbsp;</span></li><li class="L2"><span class="com">/*危险*/</span></li><li class="L3"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">danger</span><span class="pun">{</span><span class="pln">color</span><span class="pun">:</span><span class="com">#fff;background-color:#dd514c; border-color:#dd514c}</span></li><li class="L4"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">danger</span><span class="pun">:</span><span class="pln">hover</span><span class="pun">,</span></li><li class="L5"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">danger</span><span class="pun">:</span><span class="pln">focus</span><span class="pun">,</span></li><li class="L6"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">danger</span><span class="pun">:</span><span class="pln">active</span><span class="pun">,</span></li><li class="L7"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">danger</span><span class="pun">.</span><span class="pln">active</span><span class="pun">{</span><span class="pln">color</span><span class="pun">:</span><span class="com">#fff;background-color:#c62b26;border-color:#c62b26}</span></li><li class="L8"><span class="pln">&nbsp;</span></li><li class="L9"><span class="com">/*链接*/</span></li><li class="L0"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">link</span><span class="pun">{</span><span class="pln">color</span><span class="pun">:</span><span class="com">#0e90d2;cursor:pointer;border-color:transparent;background-color:transparent}</span></li><li class="L1"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">link</span><span class="pun">:</span><span class="pln">hover</span><span class="pun">,</span></li><li class="L2"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">link</span><span class="pun">:</span><span class="pln">focus</span><span class="pun">,</span></li><li class="L3"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">link</span><span class="pun">:</span><span class="pln">active</span><span class="pun">,</span></li><li class="L4"><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">link</span><span class="pun">.</span><span class="pln">active</span><span class="pun">{</span><span class="pln">color</span><span class="pun">:</span><span class="com">#095f8a;text-decoration:underline;background-color:transparent}</span></li><li class="L5"><span class="pln">&nbsp;</span></li><li class="L6"><span class="com">/*禁用状态*/</span></li><li class="L7"><span class="pun">.</span><span class="pln">btn</span><span class="pun">.</span><span class="pln">disabled</span><span class="pun">{</span><span class="pln">cursor</span><span class="pun">:</span><span class="kwd">not</span><span class="pun">-</span><span class="pln">allowed</span><span class="pun">;</span><span class="pln">background</span><span class="pun">-</span><span class="pln">image</span><span class="pun">:</span><span class="pln">none</span><span class="pun">;</span><span class="pln">opacity</span><span class="pun">:.</span><span class="lit">65</span><span class="pun">;</span><span class="pln">filter</span><span class="pun">:</span><span class="pln">alpha</span><span class="pun">(</span><span class="pln">opacity</span><span class="pun">=</span><span class="lit">65</span><span class="pun">);</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln">none</span><span class="pun">;</span><span class="pln"> pointer</span><span class="pun">-</span><span class="pln">events</span><span class="pun">:</span><span class="pln">none</span><span class="pun">}</span></li></ol></pre>
        <!--高速版-->
        <div id="SOHUCS" sid=""></div>
    </article>

</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="__STATIC__/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/prettify.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="__STATIC__/admin/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/static/h-ui.admin/js/H-ui.admin.js"></script>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript">
    /*表单提交*/
    function postForm() {
        $.ajax({
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "{:url('userinfo/index')}",
            data: $('#form').serialize(),
            success: function (res) {
                if (res.code == 1) {
                    layer.msg(res.message);
                }
                if (res.code == 0) {
                    layer.msg("更新成功");
                }
            },
            error: function () {
                console.log("异常");
            }
        });
    }
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>